<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
<body>

<div id="app">
    <table>
        <tr>
            <th colspan="6">员工列表</th>
        </tr>
        <tr>
            <th>流水号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>邮箱</th>
            <th>操作(<a href="/to/add">添加</a> )</th>
        </tr>

        <tr th:each="employee,status : ${page.list}">
            <td th:text="${status.count}"></td>
            <td th:text="${employee.empName}"></td>
            <td th:text="${employee.gender}"></td>
            <td th:text="${employee.age}"></td>
            <td th:text="${employee.email}"></td>
            <td>
                <a th:href="@{'/employee/ '+ ${employee.empId}}">修改</a>
                <a @click="deleteEmp()" th:href="@{'/employee/ '+ ${employee.empId}}">删除</a>
            </td>
        </tr>
    </table>
    <form method="post">
        <input type="hidden" name="_method" th:value="delete">
    </form>
    <div>
        <a th:href="@{/employee/page/1}" th:if="${page. hasPreviousPage}">首页</a>
        <a th:href="@{'/employee/page/' + ${page.pageNum -1}}" th:if="${page. hasPreviousPage}">上一页</a>
        <a th:href="@{'/employee/page/' + ${page.pageNum +1}}" th:if="${page. hasNextPage}">下一页</a>
        <a th:href="@{'/employee/page/' + ${page.pages}}" th:if="${page. hasNextPage}">尾页</a>
    </div>
</div>

<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script>
    new Vue({
        el: "#app",
        methods: {
            deleteEmp() {
                let form = document.getElementsByTagName("form")[0];
                form.action = event.target.href;
                form.submit();
                event.preventDefault();
            }
        }
    })
</script>
</body>
</html>